<template>
  <div class="home-container">
    <!-- 欢迎信息 -->
    <div class="welcome-section neu-card">
      <h2>欢迎使用图书管理系统，{{ user.name }}！</h2>
      <p>今天是 {{ currentDate }}，祝您使用愉快！</p>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stats-section">
      <div class="stat-card neu-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #81C784, #4CAF50);">
          <el-icon><Reading /></el-icon>
        </div>
        <div class="stat-info">
          <h3>{{ statistics.totalBooks || 0 }}</h3>
          <p>馆藏图书</p>
        </div>
      </div>
      
      <div class="stat-card neu-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #64B5F6, #2196F3);">
          <el-icon><Document /></el-icon>
        </div>
        <div class="stat-info">
          <h3>{{ statistics.borrowedBooks || 0 }}</h3>
          <p>借出图书</p>
        </div>
      </div>
      
      <div class="stat-card neu-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #FFD54F, #FFC107);">
          <el-icon><User /></el-icon>
        </div>
        <div class="stat-info">
          <h3>{{ statistics.totalUsers || 0 }}</h3>
          <p>注册用户</p>
        </div>
      </div>
      
      <div class="stat-card neu-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #E57373, #F44336);">
          <el-icon><DataAnalysis /></el-icon>
        </div>
        <div class="stat-info">
          <h3>{{ statistics.totalBorrows || 0 }}</h3>
          <p>借阅次数</p>
        </div>
      </div>
    </div>
    
    <!-- 快捷功能 -->
    <div class="quick-actions">
      <div class="action-section neu-card">
        <h3>快捷功能</h3>
        <div class="action-buttons">
          <router-link to="/dashboard/books" class="neu-button primary">
            <el-icon><Reading /></el-icon>
            图书管理
          </router-link>
          
          <router-link to="/dashboard/borrow" class="neu-button secondary">
            <el-icon><Document /></el-icon>
            借阅管理
          </router-link>
          
          <router-link to="/dashboard/statistics" class="neu-button">
            <el-icon><DataAnalysis /></el-icon>
            数据统计
          </router-link>
        </div>
      </div>
    </div>
    
    <!-- 热门图书 -->
    <div class="popular-books neu-card">
      <h3>热门图书</h3>
      <el-table :data="topBooks" style="width: 100%" class="neu-table-wrapper">
        <el-table-column prop="title" label="书名" />
        <el-table-column prop="borrowCount" label="借阅次数" width="120" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <router-link :to="`/dashboard/books?id=${scope.row.id}`" class="view-link">
              查看详情
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { Reading, Document, User, DataAnalysis } from '@element-plus/icons-vue'
import { statisticsService } from '../api/services'
import store from '../store'

// 用户信息
const user = computed(() => store.user || {})

// 统计数据
const statistics = ref({
  totalBooks: 0,
  availableBooks: 0,
  borrowedBooks: 0,
  totalUsers: 0,
  totalBorrows: 0
})

// 热门图书
const topBooks = ref([])

// 当前日期
const currentDate = computed(() => {
  const date = new Date()
  return date.toLocaleDateString('zh-CN', { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric',
    weekday: 'long'
  })
})

// 获取统计数据
const fetchStatistics = async () => {
  try {
    const response = await statisticsService.getStatistics()
    if (response.code === 200) {
      statistics.value = response.data
      topBooks.value = response.data.topBooks || []
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

onMounted(() => {
  fetchStatistics()
})
</script>

<style scoped>
@import '../assets/styles/neumorphism.css';

.home-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.welcome-section {
  padding: 25px;
  background: linear-gradient(145deg, var(--bg-color), var(--light-shadow));
}

.welcome-section h2 {
  color: var(--primary-green);
  margin-bottom: 10px;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 24px;
}

.stat-info h3 {
  font-size: 24px;
  margin: 0 0 5px 0;
  color: var(--text-primary);
}

.stat-info p {
  margin: 0;
  color: var(--text-secondary);
}

.quick-actions {
  margin-top: 10px;
}

.action-section {
  padding: 25px;
}

.action-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.action-buttons .neu-button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.popular-books {
  padding: 25px;
}

.popular-books h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.neu-table-wrapper {
  border-radius: 10px;
  overflow: hidden;
}

.view-link {
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: 500;
}

.view-link:hover {
  color: var(--primary-blue-dark);
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-section {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style>